.#{$rate-prefix-cls} {
  display: inline-block;
  font-size: 20px;
  font-style: normal;
  font-weight: normal;
  margin: 0;
  padding: 0;
  vertical-align: middle;

  &-disabled &-star {
    &::before,
    &-content::before {
      cursor: default;
    }

    &:hover {
      transform: scale(1);
    }
  }

  &-star-full,
  &-star-zero {
    position: relative;
  }

  &-star-first {
    height: 100%;
    left: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 50%;
  }

  &-star-first,
  &-star-second {
    color: #e9e9e9;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
  }

  &-star-chart {
    display: inline-block;
    font-family: 'Ionicons';
    margin: 0;
    margin-right: 8px;
    padding: 0;
    position: relative;
    transition: all 0.3s ease;

    &:hover {
      transform: scale(1.1);

      //&-star-first, &-star-second {
      //    color: $rate-star-color;
      //}
    }
  }

  &-star-chart &-star-full &-star-first,
  &-star-chart &-star-full &-star-second {
    color: $rate-star-color;
  }

  &-star-chart &-star-half &-star-first {
    color: $rate-star-color;
    opacity: 1;
  }
    
  &-star {
    display: inline-block;
    font-family: 'Ionicons';
    margin: 0;
    margin-right: 8px;
    padding: 0;
    position: relative;
    transition: all 0.3s ease;

    &:hover {
      transform: scale(1.1);
    }

    &::before,
    &-content::before {
      color: #e9e9e9;
      content: '\F2BF';
      cursor: pointer;
      display: block;
      transition: all $transition-time $ease-in-out;
    }

    &-content {
      height: 100%;
      left: 0;
      overflow: hidden;
      position: absolute;
      top: 0;
      width: 50%;

      &::before {
        color: transparent;
      }
    }

    &-half &-content::before,
    &-full::before {
      color: $rate-star-color;
    }

    &-half:hover &-content::before,
    &-full:hover::before {
      color: tint($rate-star-color, 20%);
    }
  }

  &-text {
    display: inline-block;
    font-size: $font-size-base;
    margin-left: 8px;
    vertical-align: middle;
  }
}
